<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
        >
<h:body>
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">
            <p:growl showDetail="true"/>

            <h2>Add new translation for
                <h:outputText value="#{translationBean.currentWord.text}"/>
                (<h:outputText value="#{translationBean.currentWord.language.name}"/>)
            </h2>
            <h:form id="form">
                <p:growl showDetail="true"/>

                <p:panel header="New word">
                    <h:panelGrid columns="3">
                        <h:outputLabel value="Translation :" for="txt_translation"/>
                        <h:selectOneMenu id="txt_translation" required="true" label="Translation"
                                         value="#{translationBean.newTranslation.right}" converter="${wordConverter}">
                            <f:selectItems value="#{wordBean.getOtherWords(translationBean.currentWord)}"/>
                        </h:selectOneMenu>
                        <p:commandButton value="Add" action="#{translationBean.createNew}" update="@form"
                                         style="margin:10px 0" id="btnAdd" ajax="true"/>
                    </h:panelGrid>
                </p:panel>

                <p:poll update="translationList" autoStart="true" interval="10" immediate="true"/>

                <p:dataTable value="#{translationBean.translWords}"
                             id="translationList"
                             var="word"
                             styleClass="order-table"
                             headerClass="order-table-header"
                             rowClasses="order-table-odd-row,order-table-even-row"
                        >
                    <p:column>
                        <f:facet name="header">Language</f:facet>
                        <h:outputText value="#{word.language.name}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">Translation</f:facet>
                        <h:outputText value="#{word.text}"/>
                    </p:column>
                    <p:column style="width:40px">
                        <p:commandButton id="removeButton" update=":form:translationList"
                                         icon="ui-icon-trash" title="remove"
                                         action="#{translationBean.removeTranslation(word)}" />
                    </p:column>
                </p:dataTable>
            </h:form>
            <div style="margin: 10px 0 10px 0">&nbsp;</div>
            <h:link outcome="default" value="Go Back" title="Go Back"/>
        </ui:define>
    </ui:composition>
</h:body>
</html>